//
//  StackDemoView.swift
//  Counter
//
//  Created by huangguojian on 2021/11/26.
//

import SwiftUI

struct StackDemoView: View {
    
    var body: some View {
        HStack {
            Image(systemName: "person.circle")
            Text("User.")
                .alignmentGuide(VerticalAlignment.center) { d in
                    d[.bottom]
                }
            Text("CodeMan | Huang Guojian")
        }
//        .lineLimit(1)
//        .fixedSize()
        .frame(width: 250)
        
        /*
         1.rootView 使用整个屏幕尺寸作为“提议”，向 HStack 请求尺寸。
         
         2.HStack 在接收到这个尺寸后，会向它的子 View 们进行“提议”。
         
         3.第一步，扣除掉默认的 HStack spacing 后，把剩余宽度三等分 (因为 HStack 中存在三个子 View)，并以其中一份向第一个子 View 的 Image 进行提议。
         
         4.Image 会按照它要显示的内容决定自身宽度，并把这个宽度汇报给 HStack。
         
         5.HStack 从 3 中向子 View 提案的总宽度中，扣除掉 4 里 Image 汇报的宽度，然后将剩余的宽度平分为两部分，把其中一份作为提案宽度提供给 Text("User:")。
         
         6.Text 也根据自身内容来决定宽度。不过和 Image 不太一样，Text 并不“盲目”遵守自身内容的尺寸，而是会更多地尊重提案的尺寸，通过换行 (在没有设定 .lineLimit(1) 的情况下) 或是把部分内容省略为 “…” 来修改内容，去尽量满足提案。注意，父 View 的提案对于子 View 来说只是一种建议。比如这个 Text 如果无论如何，需要使用的宽度都比提案要多，那么它也会将这个实际需要的尺寸返回。
         
         7.对于最后一个 Text，采取的步骤和方法与 6 类似。在这里，由于我们没有过多约束，分配给两个 Text 的宽度也完全足够，因此它们都会按照内容宽度进行汇报。在三个子 View 都决定好各自尺寸后，HStack 会按照设定的对齐和排列方式把子 View 们水平顺序放置。
         
         8.不要忘记，HStack 是 rootView 的子 View，因此，它也有义务将它的尺寸向上汇报。由于 HStack 知道了三个子 View 和使用的 spacing 的数值(在例子中我们使用了默认的 spacing 值)，HStack 的尺寸也得以确定。最后它把这个尺寸 (也就是图中的蓝框部分) 上报。
         
         9.最后，rootView 把 HStack 以默认方式放到自己的座标系中，也即在水平和竖直方向上都居中。
         */
    }
}

struct StackDemoView_Previews: PreviewProvider {
    static var previews: some View {
        StackDemoView()
    }
}
